import { Table, Card, Pagination, Field, DatePicker2, Form, Input, Badge, Button, Icon, Select } from '@alifd/next';
import { Link, useHistory } from 'ice';
import { alreadyDeliveryList, stayDeliveryList } from '../services';
import { useFusionTable } from 'ahooks';
import styles from './list.module.scss';
import { FormattedDate, FormattedMessage, FormattedNumber } from 'react-intl';
import { getEnumLabel } from '@/utils/enum';
import { ShippingStatusEnums } from '@/pages/OperationCenter/LogisticsDetail/entity';
import TableEmptyBlock from '@/components/TableEmptyBlock';

const { RangePicker } = DatePicker2;

interface Props {
  receive?: boolean;
}

const FilterList: React.FunctionComponent<Props> = ({ receive }: Props): JSX.Element => {
  const history = useHistory();
  const field = Field.useField([]);
  const { paginationProps, tableProps, search, error, refresh } = useFusionTable(
    receive ? alreadyDeliveryList : stayDeliveryList,
    {
      field,
    },
  );
  const { submit, reset } = search;

  const linkToReceive = () => {
    history.push('/operationCenter/logisticsDetail', { type: 'receivingScan' });
  };

  return (
    <Card free>
      <Card.Content>
        <Form className="filter-form" responsive fullWidth labelAlign="left" field={field}>
          <Form.Item colSpan={4} label="订单号:">
            <Input name="orderNo" hasClear />
          </Form.Item>
          <Form.Item colSpan={4} label="物流单号:">
            <Input name="shippingLabel" hasClear />
          </Form.Item>
          {receive ? (
            <Form.Item colSpan={4} label="物流状态:">
              <Select name="shippingStatus" hasClear dataSource={ShippingStatusEnums} />
            </Form.Item>
          ) : (
            <Form.Item colSpan={4} label="防伪标识:">
              <Input name="securityCode" hasClear />
            </Form.Item>
          )}
          {!receive ? (
            <Form.Item colSpan={4} label="鉴定时间:">
              <RangePicker name="appraisalTime" />
            </Form.Item>
          ) : null}
          <Form.Item colSpan={receive ? 12 : 8} className={styles['form-actions']}>
            <Form.Submit type="primary" onClick={submit} validate style={{ marginRight: '20px' }}>
              <FormattedMessage id="btn.search" />
            </Form.Submit>
            <Form.Reset onClick={reset}><FormattedMessage id="btn.reset" /></Form.Reset>
          </Form.Item>
        </Form>
      </Card.Content>
      {/* {!receive ? (
        <Button type="primary" iconSize="xs" className={styles.addBtn} onClick={linkToReceive}>
          <Icon type="add" />
          收货
        </Button>
      ) : null} */}
      <Card.Content>
        <Table
          {...tableProps}
          isZebra
          emptyContent={<TableEmptyBlock error={error} onRefresh={refresh} />}
          primaryKey="shippingId"
        >
          {receive ? (
            <Table.Column
              dataIndex="shippingLabel"
              title="物流单号"
              asyncResizable
            />
          ) : (
            <Table.Column title="防伪标识" dataIndex="securityCode" asyncResizable />
          )}
          <Table.Column title="订单号" dataIndex="orderNo" asyncResizable />
          <Table.Column
            dataIndex="productName"
            title="商品信息"
            asyncResizable
            cell={(val, i, row) => (
              <div className={styles.baseinfo}>
                <img
                  className={styles.img}
                  src={row.mainImage}
                  alt="商品主图"
                />
                <div>
                  <span className={styles.title}>{val}</span>
                  <div className={styles.row}>
                    <span>{`${row.brandName}/${row.categoryName}`}</span>
                    <span>{`规格:${row.attrValue || '无'}`}</span>
                  </div>
                </div>
              </div>
            )}
          />
          <Table.Column
            dataIndex="toName"
            title="收件人信息"
            asyncResizable
            cell={(val, i, row) => (
              <div>
                <p>{val}</p>
                <span>{row.toTelephone}</span>
              </div>
            )}
          />
          {receive ? (
            <Table.Column
              dataIndex="shippingStatus"
              title="状态"
              hidden={!receive}
              align="center"
              asyncResizable
              cell={(val) => (
                <div>
                  <Badge
                    dot
                    style={{
                      marginRight: 5,
                      backgroundColor: getEnumLabel(ShippingStatusEnums, val, ['value', 'color']),
                    }}
                  />
                  {getEnumLabel(ShippingStatusEnums, val)}
                </div>
              )}
            />
          ) : (
            <Table.Column title="库位编号" dataIndex="stockNo" asyncResizable />
          )}
          {receive ? (
            <Table.Column
              title="发货时间"
              dataIndex="shippingTime"
              asyncResizable
              hidden={!receive}
              cell={(val) => (<FormattedDate value={val} />)}
            />
          ) : (
            <Table.Column
              title="下单时间"
              dataIndex="orderTime"
              asyncResizable
              hidden={receive}
              cell={(val) => (<FormattedDate value={val} />)}
            />
          )}
          <Table.Column
            dataIndex="shippingId"
            title="操作"
            hidden={!receive}
            cell={(val, i, row) => (
              <Link
                to={{
                  pathname: '/operationCenter/logisticsDetail',
                  state: { shippingId: val, type: 'delivery' },
                }}
              >
                查看
              </Link>
            )}
          />
        </Table>
        <Pagination
          style={{ marginTop: 16, textAlign: 'right' }}
          shape="arrow-only"
          totalRender={(total) => (
            <FormattedMessage
              id="page.total"
              tagName="div"
              values={{ total }}
            />
          )}
          {...paginationProps}
        />
      </Card.Content>
    </Card>
  );
};

export default FilterList;
